<template>
  <div class="app-container bg-gray">
    <el-row :gutter="20" class="plugins-row">
      <el-col
        v-for="item in pluginList"
        :key="item['id']"
        :xs="12"
        :sm="6"
        :md="6"
        :lg="4"
        :xl="3"
        class="plugins-col">
        <el-card shadow="always" class="plugins-card">
          <router-link :to="`${item.path}/`" :target="pluginOpenType">
            <div class="plugins-content">
              <svg-icon :icon-class="item['meta']['icon']" class="icon"/>
              <div class="label">{{ item['name'] }}</div>
              <img src="@/assets/open.png" class="icon-enter">
              <div class="text">点击进入</div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 插件打开方式
        pluginOpenType: '_blank',
        // 插件列表
        pluginList: []
      }
    },
    watch: {},
    created() {
      this.pluginOpenType = this.$store.getters.pluginOpenType === 1 ? '_blank' : '_self'
      const pluginList = this.$store.getters.addRouters.filter(plugin => {
        if (plugin['showMode'] === 'PLUGIN') {
          return true;
        }
        return false;
      });
      console.log(pluginList)
      this.pluginList = pluginList;
    },
    methods: {}
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .plugins-row {
    .plugins-col {
      max-width: 300px;
      margin-bottom: 20px;
      border-radius: 4px;

      .plugins-card {
        cursor: pointer;
        border: 1.5px solid white;

        &:hover {
          border: 1.5px solid $panGreen;
        }

        .plugins-content {
          text-align: center;

          .icon {
            height: 80px;
            width: 80px;
            border-radius: 8px;
            color: $panGreen;
          }

          .label {
            font-size: 18px;
            color: #606266;
            margin: 15px 15px 10px 15px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .text {
            font-size: 13px;
            color: #b7b7b7;
          }
          .icon-enter {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
</style>
